<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实战-两段式倒计时</title>
</head>

<body>

    <!--活动开始时间-->
    <span id="ActivityDate" class="time">2022-01-05 12:00:00</span>

    现在 --倒计时1-- 活动开始 --倒计时2-- 活动结束 --结束信息--

    <script>
        // 获取id
        let ActivityDate = document.getElementById("ActivityDate");

        //倒计时 - 活动开始
        function timepiece(key) {
            let datatime = /^[\d]{4}-[\d]{1,2}-[\d]{1,2}( [\d]{1,2}:[\d]{1,2}(:[\d]{1,2})?)?$/ig, str = '', s;
            // 正则验证日期格式是否正确
            if (!key.match(datatime)) {
                console.log('日期参数错误，请按格式填写，如 1996-10-22 24:00:00');
                return
            }
            // 当前日期减去活动日期，判断是否超出
            let sec = (new Date(key.replace(/-/ig, '/')).getTime() - new Date().getTime()) / 1000;
            if (sec < 0) {
                //活动时间开始后，开始新的倒计时，到活动截止时间停止计时

                //活动截止时间
                let deadline = "2022-02-05 12:00:00";
                ActivityDate.innerHTML = "<span style=" + "color:red;" + ">" + "本次活动截止至<b>2023年02月05号</b></span><h3>目前仅剩</h3>";
                return
            }
            s = {
                '天': sec / 24 / 3600,
                '时': sec / 3600 % 24,
                '分': sec / 60 % 60,
                '秒': sec % 60
            }
            for (i in s) {
                if (Math.floor(s[i]) > 0) str += Math.floor(s[i]) + i;
            }
            if (Math.floor(sec) == 0) {
                str = '0秒';
            }
            // 距离活动结束时间显示到页面
            ActivityDate.innerHTML = "<span>" + "还有" + str + "<br>第三届杯货节就开始啦" + "</span>";
            // 每隔1秒更新一次
            setTimeout(function () {
                timepiece(key)
            }, 1000)
        }
        timepiece(ActivityDate.innerHTML);

        //活动开始 - 活动结束
        //第二阶段计时开始

    </script>
    <style>
        .time {
            display: block;
            text-align: center;
            font-size: 26px;
            color: red;
            padding: 5em 2em;
        }
    </style>
</body>

</html>